/* @flow */

import React, {Component} from 'react';
import {View, Text, StyleSheet, Button,Image} from 'react-native';
import {addNavigationHelpers, StackNavigator, DrawerNavigator, TabNavigator, NavigationActions} from 'react-navigation';

//redux
import { connect } from 'react-redux';
// import PropTypes from 'prop-types';


import AppHome from './AppHome.js' //首页
import AppCommunity from './AppCommunity.js' //社区
import AppFind from './AppFind.js' //发现
import AppSearch from './AppSearch.js' //搜索
import AppMine from './AppMine.js' //我的
import AppSetting from './AppSetting.js'//设置
import AnchorScene  from './FMFind/HTAnchorFM';
import AllAnchorScene from './FMFind/HTAllAnchorScene';
import BroadCastListScene from './FMFind/HTBroadCastListScene';

import PostEditView from './Community/PostEditView'
import PlayingListView from './Community/PlayingListView'
import DetailsView from './Community/DetailsView'

import HomeDetailView from './Home/HomeDetailView.js';
import MoreFMView from './Home/MoreFMView.js';
import FMPlayerView from './Home/FMPlayerView.js';

const Tabnavigation = TabNavigator(
//RouteConfigs
{
  home: {
    screen: AppHome,
    navigationOptions: {
      // title: '首页'
    },
    params:{
      index:1,
    }
  },
  find: {
    screen: AppFind,
    navigationOptions: {
      title: '发现',
      header: <View></View>,
      //tabbar
      tabBarIcon : ({focused, tintColor }) => (
        <Image
          resizeMode='cover'
          source={focused?require('../img/tabicon/faxianSelectedXiong1.png'):require('../img/tabicon/faxianXiong1.png')}
          style={[styles.icon]}
        />
      ),
    }
  },
  community: {
    screen: AppCommunity,
    navigationOptions: ({navigation,screenProps}) => {
      const {navigate,state} = navigation;
      var title = state.params && state.params.title;
      var selected = false;// state.params && state.params.selected;

      return {
        title: '社区',
        header: <View></View>,
        //tabbar
        tabBarIcon : ({focused, tintColor }) => (
          <Image
            resizeMode='cover'
            source={focused?require('../img/tabicon/shequSelectedXiong1.png'):require('../img/tabicon/shequXiong1.png')}
            style={[styles.icon]}
          />
        ),
      }
    }
  },
  mine:{
    screen: AppMine,
    navigationOptions:({navigation,screenProps}) => {
      const {navigate,state} = navigation;
      var title = state.params && state.params.title;
      var selected = false;// state.params && state.params.selected;

      return {
        title: '我的',
        header: <View></View>,
        //tabbar
        tabBarIcon : ({focused, tintColor }) => (
          <Image
            source={focused?require('../img/tabicon/mySelectedXiong1.png'):require('../img/tabicon/myXiong1.png')}
            style={[styles.icon]}
          />
            ),

      }
    }
  },
  setting: {
    screen: AppSetting,
      navigationOptions: ({navigation,screenProps}) => {
        const {navigate,state} = navigation;
        var title = state.params && state.params.title;
        var selected = false;// state.params && state.params.selected;

      return {
        title: '设置',
        header: <View></View>,
        //tabbar
        tabBarIcon : ({focused, tintColor }) => (
          <Image
            resizeMode='cover'
            source={focused?require('../img/tabicon/shezhiSelectedXiong1.png'):require('../img/tabicon/shezhiXiong1.png')}
            style={[styles.icon]}
          />
        ),
      }
    }
  },

},
//TabNavigatorConfig
{
  initialRouteName: 'home', //默认组件
  initialRouteParams: {
    name: ''
  },

  tabBarOptions: {
    activeTintColor: 'white',//label和icon的前景色 活跃状态下
    inactiveTintColor: 'white',//label和icon的前景色 不活跃状态下
    activeBackgroundColor: 'rgba(56, 60, 63, 1.00)',//label和icon的背景色 活跃状态下
    inactiveBackgroundColor: 'rgba(56, 60, 63, 1.00)',//label和icon的背景色 不活跃状态下
    showLabel: true, //是否显示label，默认开启 style：tabbar的样式
    showIcon: true,
    scrollEnabled: false, //whether to enable scrollable tabs
    upperCaseLabel: false,//whether to make label uppercase, default is true
    pressColor: 'red',//color for material ripple
    pressOpacity: 0.7,//opacity for pressed tab (iOS and Android < 5.0 only)

    indicatorStyle: {
      height: 2,
    },
    labelStyle:{
      marginTop:4,
      fontSize:10,
    },//label的样式安卓属性
    iconStyle:{
      marginTop:-3,
      width:26,
      height:26,
      },//style object for the tab icon
    onNavigationStateChange : (prevState, newState, action) => {
      // console.log(prevState);
      // console.log(newState);
      // console.log(action);
    },

  }, //配置标签栏的一些属性iOS属性
  tabBarVisible: true,
  swipeEnabled: true,
  tabBarPosition: 'bottom',
  animationEnabled: true,
  lazy: false,
  backBehavior: 'none', //按 back 键是否跳转到第一个Tab(首页)， none 为不跳转
  // tabBarComponent: TabBarBottom,
  // tabBarLabel: 'label',
  //响应事件
  onTransitionStart: () => console.log('onTransitionStart:'+'导航栏切换开始'),
  onTransitionEnd: () => console.log('onTransitionEnd:'+'导航栏切换结束'),
}
)


const RootStack = StackNavigator(
//RouteConfigs
{
  tab:{
    screen:Tabnavigation,
  },
  search: {
    screen: AppSearch,
    navigationOptions: {

    },
    path: 'page/search'
  },
  home: {
    screen: AppHome,
    navigationOptions: {
    }
  },
  find: {
    screen: AppFind,
    navigationOptions: {
      title: '发现'
    }

  },
  Anchor:{
    screen:AnchorScene
  },

  AllAnchor:{
    screen:AllAnchorScene
  },

  BroadCastList:{
    screen:BroadCastListScene
  },
  community: {
    screen: AppCommunity,
    navigationOptions: {
      title: '社区'
    }
  },
  setting: {
    screen: AppSetting,
    navigationOptions: {
      title: '设置'
    }
  },
  PostEditView:{
  screen:PostEditView,
  },
  PlayingListView:{
    screen:PlayingListView,
  },
  DetailsView:{
    screen:DetailsView,
  },
  Detail: {screen: HomeDetailView},
  MoreFM: {screen: MoreFMView},
  FMPlayer: {screen: FMPlayerView},
},
//StackNavigatorConfig
{
  //基本默认配置
  initialRouteName: 'tab',//默认显示的screen的 路由名字
  initialRouteParams: {
    name: 'stack_name'
  }, //默认screen的 参数
  mode: 'card', //card   modal;
  headerMode: 'float', //float screen  none;
  cardStyle: {
    backgroundColor: 'lightgray'
  },

  //navigation配置
  navigationOptions: {
    // title: '默认标题', //默认标题
    headerTintColor: 'blue', //header前景色颜色
    cardStack: {
      gesturesEnabled: true
    }
  },

  //响应事件
  onTransitionStart: () => console.log('onTransitionStart:'+'导航栏切换开始'),
  onTransitionEnd: () => console.log('onTransitionEnd:'+'导航栏切换结束'),
}
)


const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  icon:{
    width:26,
    height:26,
  },
});


//---redux
//---开始
/*
 * 导航 添加helper
 */
// const AppWithNavigationState = ({ dispatch, nav }) => (
//   <RootStack navigation={addNavigationHelpers({ dispatch, state: nav })} />
// );



//store 中存储的状态绑定
const mapStateToProps = state => ({
  nav: state.nav,
});

export default connect(mapStateToProps)(RootStack);
// export default RootTab;
